Panda CSS
https://gyazo.com/5b9fbb536187544d667377a3f3499b5c
Chakra UIとの関係性があんまり良くわかってないmrsekut.icon
例
code:ts
import { css } from "./styled-system/css";
import { circle, stack } from "./styled-system/patterns";
function App() {
return (
<div className={stack({ direction: "row", p: "4" })}>
<div className={circle({ size: "5rem", overflow: "hidden" })}>
</div>
<div className={css({ mt: "4", fontSize: "xl", fontWeight: "semibold" })}>
John Doe
</div>
<div className={css({ mt: "2", fontSize: "sm", color: "gray.600" })}>
john@doe.com
</div>
</div>
);
}
3種類ぐらい書き方がある模様
Panda CSSの導入方法が書かれているだけでPanda CSSってなんなの？の説明があまりなされてない